<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欧普商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/jiesuan.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1993122_z2zu5zv3et.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/citys.js"></script>
<body>
    <header>
            <div class="h_top">
                <div class="main h_main">
                    <span class="iconfont icon-ziyuan"></span><span class="h_span1"><span>送货地址：</span><span class="h_city">上海</span><i class="iconfont icon-xiala xiala1"></i></span>
                    <ul class="ul1">
                        <li><a href="" class="h_a1"style="color:#000;">HI,18800003800</a></li>
                        <li><a href="">我的订单</a></li>
                        <li><a href="" class="h_a2" id="ul1_a2">个人中心 <i class="iconfont icon-xiala xiala2"></i></a></li>
                        <li><a href="" class="h_a1" id="ul1_a1">手机服务</a></li>
                    </ul>
                </div>
            </div>

            <div class="h_nav">
                <div class="main h_main">
                    <img src="./img/logo.png" alt="">
                    <span class="gouwu">结算页</span>
                    <div class="main h_main h_mainBox">
                        <div class="box1">
                            <ul class="box1_ul1">
                                <li>A 安徽省  澳门特别行政区</li>
                                <li>B 北京</li>
                                <li>C 重庆</li>
                                <li>D 钓鱼岛</li>
                                <li>F 福建省</li>
                                <li>G 广东省 广西壮族自治区 贵州省 甘肃省</li>
                                <li>H 河北省 黑龙江省 河南省 湖北省 湖南省 海南省</li>
                            </ul>
                            <ul class="box1_ul2">
                                <li>J 江苏省 吉林省 江西省</li>
                                <li>L  辽宁省</li>
                                <li>N 内蒙古自治区 宁夏回族自治区</li>
                                <li>Q 青海省</li>
                                <li>S 山西省 上海 陕西省 山东省 四川省</li>
                                <li>T 天津 台湾</li>
                                <li>X 西藏自治区 新疆维吾尔自治区 香港特别行政区</li>
                                <li>Y 云南省</li>
                                <li>Z 浙江</li>
            
                            </ul>
                        </div>
                        <div class="box2">
                            <ul>
                                <li>待处理订单</li>
                                <li>消息</li>
                                <li>我的收藏</li>
                                <li>我的问答</li>
                                <li>我的消费券</li>
                                <li>售后服务</li>
                            </ul>
                        </div>
                        <div class="box3">
                            <h6>欧普照明商城</h6>
                            <img src="./img/QR_code.png" alt="">
                        </div>
                    </div>           
                </div>
                
            </div>
           
           <!-- 边上的条 -->
           <div id="gloal-bg">
                <div class="fix-nav">
                    <ul>
                       <li><span class="car"></span>
                           <em class="em em-content1 em1">购物车</em></li>
                       <li><span class="ear"></span>
                        <em class="em em-content2 em1">客服</em></li>
                       <li><span class="code"></span>
                        <em class="em1 em-content"><img src="./img/QR_code.png" alt=""><h2>手机购物更优惠</h2></em></li>
                       <li><span class="phone"></span>
                        <em class="em em-content3 em1">消息</em></li>
                    </ul>
                </div>
                <div class="fix-top">
                    <a href="#"><span class="toTop"></span>
                        <em class=" goTop">返回顶部</em>
                    </a>
                </div>
           </div>
    </header>
    <article>
        <div class="main">
            <div id="mask">
                <form class="form" id="addressEdit"style="display: block">
                    <div class="add-title">
                        <span class="title-text">新增收货人信息</span>
                        <span class="close-img"></span>
                    </div>
                    <div>
                        <dl class="clearfix">
                            <dt>
                                <span class="colorRed">*</span>
                                <span class="ng-binding">收货人</span>
                            </dt>
                            <dd>
                                <input type="text" class="seem-height " placeholder="姓名" id="userName" style="padding-left:10px;" >
                                <!-- <div class="tip " style="display: none;">仅支持20个字符以内的中文、英文或数字</div>
                                <div class=" pddleft"  style="display: none;">
                                    <span class="ng-binding">收货人不能为空</span>
                                    <span class="ng-binding ng-hide">仅支持20个字符以内的中文、英文或数字</span>
                                </div> -->
                            </dd>
                        </dl>
                        <dl class="clearfix">
                            <dt class="fl">
                                <span class="colorRed">*</span>
                                <span class="ng-binding">所在地区</span>
                            </dt>
                            <dd>
                                <a class="spaddress " href="#">
                                    <select name=""  id="province"></select>
                                    <select name=""  id="city"></select>
                                    <select name=""  id="area"></select>
                                    <span class="finish" style="opacity: 0;"></span>
                                </a>
                        
                            </dd>
                        </dl>
                        <dl class="clearfix">
                            <dt>
                                <span class="colorRed">*</span>
                                <span class="ng-binding">详细地址</span>
                            </dt>
                            <dd>
                                <input type="text" class="seem-height " placeholder="街道名称编号 楼宇名称 单位 房间" id="userarea" style="padding-left:10px;" >
                            </dd>
                        </dl>

                        <dl class="clearfix">
                            <dt>
                                <span class="colorRed">*</span>
                                <span class="ng-binding">手机号码</span>
                            </dt>
                            <dd>
                                <input type="text" class="seem-height " placeholder="常用手机号码" id="telphone" style="padding-left:10px;" >
                            </dd>
                        </dl>
                        <div class="add-bottom">
                            <span class="ng-binding ng-scope">用来接收订单提醒邮件，便于您及时了解订单状态</span>
                           
                            <input type="button" class="savename" value="保存收货人信息">
                        </div>
                    </div>
                </form>
            </div>
            <div class="cart-title">
                <h2>填写并核对订单信息</h2>
            </div>
            <div class="stlt">
                <div class="spad">
                    <div class="st">
                        <h4 style="float: left;">收货人信息</h4>
                        <span class="new">新增收货地址</span>
                        </ul>
                    </div>
                    <div class="sc">
                        <ul class="address">
                            <li>
                                <div class="row">
                                    <div class="a1">李某某</div>
                                    <div class="a2">
                                        李某某&nbsp;&nbsp;&nbsp;&nbsp;山西省太原市小店区/小店区
                                    </div>
                                    <div class="a3">188****3006</div>
                                    <div class="a5">
                                        <span class="mo">默认地址</span>
                                    </div>
                                    <div class="a4">
                                        <a href="">编辑</a>
                                        <a href="">删除</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="sb">
                <div class="st">
                    <h5>商品信息</h5>
                    <ul>
                        <li>订单</li>
                        <li>商品</li>
                        <li>单价</li>
                        <li>数量</li>
                        <li>合计</li>
                        
                    </ul>
                    <p>
                        <span>YT0234244290</span>
                        <img src="./img/fy1.jpg" alt="" class="float_left">
                        <span class="neirong">【新品】几何线性装饰吊灯</span>
                        <span class="price">￥998.00</span>
                        <span class="count"><span class="count1">1</span></span>
                        <span class="xiaoji">￥998.00</span>
                    </p>
                </div>
                <dl class="remarks">
                    <h4 class="ng-binding">
                        买家备注
                        <span>(提示：请勿填写有关支付、收货、发票方面的信息)</span>
                    </h4>
                    <dd>
                        <input type="text" placeholder="选填，限50个字（对本次交易的说明，建议先与卖家达成一致）">
                    </dd>
                </dl>
                <div class="fapiao">
                    <h4>发票信息</h4>
                    <div class="a1 ">不支持开具发票</div>
                </div>
                <h4 class="jiesuan">结算信息</h4>

                <div class="sum">
                    <dl class="zj">
                        <dt >共&nbsp;<span class="colorRed">1</span>&nbsp;件商品，合计：
                        </dt>
                        <dd>￥1,299.00</dd>
                        <dt>运费：</dt>
                        <dd>￥0.00</dd>
                        <dt>促销优惠：</dt>
                        <dd>-￥60.00</dd>
                        <dt>优惠券： </dt>
                        <dd>-￥100.00</dd>
                    </dl>
                </div>
                <div class="sum-pay">
                    <p class="pdB10">
                        <span class="ng-binding">应付总额：</span><span class="colorRed">￥1,139.00</span>
                    </p>
                    <div class="text-right ">
                        <span class="fr ng-binding">收货人李某某
                            188****3006</span>
                        <span class="fr sum-pay-man">寄送至：山西省太原市小店区/小店区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    </div>
                    
                </div>
                <a href="http://127.0.0.1:56/shouyin.html"><div class="bth-buy">确认订单</div></a>>
            </div>
           
        </div>
          
    </article>
    <footer>
        <div class="main f_main">
            <div class="f_box1">
                <div class="f_bo1">
                    <p>扫码快捷购物</p>
                    <img src="./img/QR_code.png" alt="">
                </div>
                <div class="f_bo2">
                    <p>官方商城电话</p>
                    <h4>0512-63828888-5022</h4>
                    <h4>0512-63828888-5333</h4>
                    <p>工作时间</p>
                    <h4>周一到周日 8:00-凌晨1:00</h4>
                </div>
            </div>
            <ul>
                <li>购物指南
                    <h6>购物须知</h6>
                </li>
                <li>支付方式</li>
                <li>配送服务</li>
                <li>售后保障</li>
                <li>关于欧普</li>
            </ul>
            <h5>Copyright © 1996-2017欧普照明股份有限公司版权所有&nbsp;&nbsp;|&nbsp;&nbsp;沪ICP备15024911号-1</h5>
            <div class="f_box2">
                <img src="./img/foot1.png" alt="">
                <img src="./img/foot2.png" alt="">
                <img src="./img/foot3.png" alt="">
            </div>
        </div>
    </footer>


    <script>
        $(".h_span1").mouseenter(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(180deg)",
                transition:"0.5s",
            })
            $(".box1").show()    
        }).mouseleave(function(){
            $(".xiala1").css({
                display:"inline-block",
                transform: "rotate(0deg)",
                transition:"0.5s",
            })
            $(".box1").hide()
        })
 
        $("#ul1_a2").mouseenter(function(){
            $(".box2").show()    
        }).mouseleave(function(){
            $(".box2").hide() 
        })
        $("#ul1_a1").mouseenter(function(){
            $(".box3").slideDown() 
        }).mouseleave(function(){
            $(".box3").hide() 
        })
        $(".bannerLeft .navLi").mouseenter(function(){
            $(this).find($(".nav-items")).show()
        }).mouseleave(function(){
            $(this).find($(".nav-items")).hide()
        })
        // 新增收货人信息
        $(".new").click(function(){

            $("#mask").show()
        })
        $(".close-img").click(function(){
            $("#mask").hide()
        })
        $(".savename").click(function(){
            $("#mask").hide()
        })
        // 三级联动
        let province = $("#province")
        let city = $("#city")
        let area = $("#area")
        // 更新区域数据
        function updateArea() {
            // 清掉区内的内容准备重新插入
            area.html("")
            // 返回当前选中的城市的数据对象
            let cData = citys[province[0].selectedIndex].city[city[0].selectedIndex].area;
            cData.forEach((item, index) => {
                let option = $(`<option>${item}</option>`)
                area.append(option)
            })
            // map.centerAndZoom(province.val() + city.val() + area.val(), 15);
        }
        province.change(function () {
            // 清掉城市内的内容准备重新插入
            city.html("")
            // 返回当前选中的省份的数据对象
            let pData = citys[this.selectedIndex];

            pData.city.forEach((item, index) => {
                let option = $(`<option>${item.name}</option>`)
                city.append(option)
            })

            updateArea()
        })
        city.change(function () {
            updateArea()
        })
        // area.change(function () {
        //     map.centerAndZoom(province.val() + city.val() + area.val(), 15);
        // })
        citys.forEach((item, index) => {
            let option = $(`<option>${item.name}</option>`)
            province.append(option)
            city.append(`<option>${citys[0].city[0].name}</option>`)
            area.append(`<option>${citys[0].city[0].area[0]}</option>`)
        })
    </script>
</body>
</html>